<template>
  <div style="width: 100%">
    <a-list
      item-layout="horizontal"
      :data-source="props.postList"
      class="post-list"
    >
      <template #renderItem="{ item }">
        <a-list-item class="post-list-item">
          <a-list-item-meta class="content">
            <template #title class="item-title" @click="gotoMd(item)">
              <a style="font-size: 1.3em" @click="gotoMd(item)">
                <span v-html="item.title"></span>
              </a>
            </template>
            <template #avatar>
              <a-avatar :src="item.user.userAvatar" />
            </template>
            <template #description>
              <a-typography-paragraph
                :ellipsis="{rows: 2}">
                <span v-html="item.content"></span>
              </a-typography-paragraph>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  margin: 10px;
                "
              >
                <span>
                  <a-tag v-for="i in item.tagList" :key="i" color="default">
                    {{ i }}
                  </a-tag>
                </span>

                <!--收藏-->
                <span>
                  <a-space size="large">
                    <span><Favour :post-id="item.id"></Favour></span>
                    <span style="color: black">{{
                      formatDateTime(item.createTime)
                    }}</span>
                  </a-space>
                </span>
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults, ref } from "vue";
import { useRouter } from "vue-router";
import { LikeOutlined, StarOutlined } from "@ant-design/icons-vue";
import Favour from "@/components/Favour/Favour.vue";
interface Props {
  postList: any[];
  pagination: any;
}

const props = withDefaults(defineProps<Props>(), {
  postList: () => [],
  pagination: () =>ref()
});

function formatDateTime(date: string): string {
  const datetime = new Date(date);
  const year = datetime.getFullYear();
  const month = String(datetime.getMonth() + 1).padStart(2, "0");
  const day = String(datetime.getDate()).padStart(2, "0");
  const hour = String(datetime.getHours()).padStart(2, "0");
  const minute = String(datetime.getMinutes()).padStart(2, "0");
  const format = `${year}-${month}-${day} ${hour}:${minute}`;
  return format;
}

const router = useRouter();

const gotoMd = (item: any) => {
  // console.log(item);
  window.open(`/post/${item.id}`);
  // router.push({
  //   path: `/post/${item.id}`,
  // });
  document.title = "聚合搜索-文章";
};
const toHighlight = (description: string) => {
  return { template: `<span v-html="${description}"></span>` };
};

const actions: Record<string, any>[] = [
  { icon: StarOutlined, text: "156" },
  { icon: LikeOutlined, text: "156" },
];
</script>

<style lang="less">
.post-list {
  width: 100%;

  .post-list-item {
    .ant-list-item-meta-description .content {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
    }
  }
}
</style>